<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>博文分析</title>
    <style>
        /* 全局样式 */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 20px;
            background-color: #f5f5f5;
        }

        h1 {
            text-align: center;
            color: #333;
        }

        /* 表单样式 */
        .form-container {

            max-width: 400px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        label {
            display: block;
            margin-bottom: 5px;
        }

        input[type="text"],
        input[type="datetime-local"],
        textarea {
            width: 100%;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
            resize: none;
        }

        #content {
            width: 100%;
            height: 200px;
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
            resize: none;

        }

        .button-container {
            text-align: center;
        }

        button {
            margin: 20px auto;
            padding: 10px 20px;
            background-color: #4CAF50;
            color: #fff;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        button:hover {
            background-color: #45a049;
        }

        /* 输出样式 */
        .output-container {
            max-width: 400px;
            margin: 20px auto;
            padding: 20px;
            background-color: #fff;
            border-radius: 5px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .output-item {
            margin-bottom: 10px;
        }

        .output-item label {
            display: inline-block;
            width: 100px;
            font-weight: bold;
        }

        .output-item span {
            font-size: 18px;
        }

        /* 加载和错误提示样式 */
        .loading,
        .error {
            text-align: center;
            margin-top: 10px;
            font-size: 16px;
        }

        .loading {
            color: #007BFF;
        }

        .error {
            color: red;
        }



        /* 表单和输出样式保持不变 */

        /* 热词排名样式 */
        .hot-words {
            float: right;
            width: 250px;
            margin-left: 20px;
            background: linear-gradient(to bottom, #f8f8f8, #e8e8e8);
            border-radius: 10px;
            padding: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .hot-words h3 {
            text-align: center;
            color: #333;
            margin-bottom: 20px;
        }

        .hot-words ul {
            list-style: none;
            padding: 0;
        }

        .hot-words li {
            position: relative;
            padding-left: 25px;
            margin-bottom: 10px;
            color: #666;
        }

        .hot-words li::before {
            content: '➤';
            position: absolute;
            left: 0;
            color: #ff6347;
        }

        .hot-words li span {
            font-weight: bold;
            color: #333;
            margin-right: 5px;
        }

        /* 清除浮动 */
        .clearfix::after {
            content: "";
            display: table;
            clear: both;
        }

        /* 确保表单和热词排名之间有足够的空间 */
        .form-container {
            margin-bottom: 20px;
        }

        /* margin */
        .margin-top {
            margin-top: 10px;
        }
    </style>
</head>

<body>

    <h1>微博互动预测</h1>

    <div class="hot-words">
        <h3>热词排名</h3>
        <ul>
            <li><span>1</span> http</li>
            <li><span>2</span> 红包</li>
            <li><span>3</span> 分享</li>
            <li><span>4</span> 数据</li>
            <li><span>5</span> 技术</li>
            <li><span>6</span> 微博</li>
            <li><span>7</span> 中国</li>
            <li><span>8</span> 2015</li>
            <li><span>9</span> IT</li>
            <li><span>10</span> 手气</li>
            <li><span>11</span> 下载</li>
            <li><span>12</span> 现金</li>
            <li><span>13</span> 学习</li>
            <li><span>14</span> 手机</li>
            <li><span>15</span> 互联网</li>
            <!-- 可以继续添加更多热词 -->
        </ul>
    </div>



    <div class="form-container">
        <form id="blogForm">
            <div class="radio-group">
                <span>输入类型: </span>
                <span for="uidInput">用户UID</span>
                <input type="radio" id="uidInput" name="inputType" value="uid" checked>
                <span for="jsonInput">用户博文历史</span>
                <input type="radio" id="jsonInput" name="inputType" value="json">
            </div>
            <div id="uid_div">
                <label for="uid" class="margin-top">用户UID:</label>
                <input class="margin-top" type="text" id="uid" name="uid" placeholder="请输入用户uid">
            </div>
            <div id="json_div" style="display: none;">
                <label class="margin-top" for="uid" class="margin-top-20">博文历史:</label>
                <input class="margin-top" type="file" id="jsonFile" accept=".json" onchange="readJsonFile(this)" />
            </div>
            <label class="margin-top" for="time">发布时间:</label>
            <input class="margin-top" type="text" id="time" placeholder="请输入发布时间time">

            <label class="margin-top" for="content">博文内容:</label>
            <textarea class="margin-top" type="text" id="content" placeholder="请输入博文内容content"></textarea>

            <button class="margin-top" type="button" onclick="predict()">预测</button>

            <div class="margin-top" id="loading" class="loading" style="display: none;">加载中...</div>
            <div class="margin-top" id="error" class="error" style="display: none;">发生错误！</div>
        </form>
        <div id="input_type" style="display:none">uid</div>
        <div id="jsonContent" style="display: none"></div>
    </div>



    <div class="output-container">
        <div class="output-item">
            <label for="forwardCount">转发数量:</label>
            <span id="forward_count">0</span>
        </div>

        <div class="output-item">
            <label for="commentCount">评论数量:</label>
            <span id="comment_count">0</span>
        </div>

        <div class="output-item">
            <label for="likeCount">点赞数量:</label>
            <span id="like_count">0</span>
        </div>
    </div>

    <script>
        document.getElementById('blogForm').addEventListener('change', function (event) {
            if (event.target.matches('input[name="inputType"]')) {
                var uidDiv = document.getElementById('uid_div');
                var jsonDiv = document.getElementById('json_div');
                var input_type = document.getElementById("input_type");
                if (event.target.value === 'uid') {
                    uidDiv.style.display = 'block';
                    jsonDiv.style.display = 'none';
                    input_type.textContent = 'uid';
                } else if (event.target.value === 'json') {
                    uidDiv.style.display = 'none';
                    jsonDiv.style.display = 'block';
                    input_type.textContent = 'json';
                }
            }
        });
        function readJsonFile(input) {
            var file = input.files[0]; // 获取文件对象
            var reader = new FileReader(); // 创建FileReader对象
            reader.onload = function (e) {
                var content = e.target.result; // 读取文件内容
                document.getElementById('jsonContent').textContent = content
            };
            reader.readAsText(file); // 以文本形式读取文件
        }
        function predict() {
            var uid = document.getElementById("uid").value;
            var time = document.getElementById("time").value;
            var content = document.getElementById("content").value;
            var input_type = document.getElementById("input_type").textContent;
            var jsonContent = document.getElementById("jsonContent").textContent;

            fetch('/predict', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify({
                    uid: uid,
                    time: time,
                    content: content,
                    input_type: input_type,
                    jsonContent: jsonContent
                })
            })
                .then(response => response.json())
                .then(data => {
                    document.getElementById("forward_count").textContent = data.forward_count;
                    document.getElementById("comment_count").textContent = data.comment_count;
                    document.getElementById("like_count").textContent = data.like_count;
                })
                .catch(error => console.error('Error:', error));
        }
    </script>

</body>

</html>